<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useCounterStore } from '../store/counter'

// const counterStore = useCounterStore()
// 同样有解构后丢失响应式的问题，如何解决呢？ storeToRefs
const counterStore = useCounterStore()
// 注意：storeToRefs 只能处理 仓库中 暴露的 响应式数据 的 键值对，因为普通的数据本身解构没有问题
const { count, doubleCount } = storeToRefs(counterStore)
const { addCount, asyncAddCount } = counterStore

</script>

<template>
  <div>TestCounter</div>
  <div>count: {{ count }}</div>
  <div>doubleCount: {{ doubleCount }}</div>
  <div><button @click="addCount">addCount</button></div>
  <div><button @click="asyncAddCount">asyncAddCount</button></div>
</template>
